<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-select v-model="queryInfo.batchId" placeholder="请选择批次">
            <el-option
                v-for="item in couponBatchList"
                :key="Number(item.id)"
                :label="item.name"
                :value="Number(item.id)">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="卡密" size="small" class="input-with-select" v-model="queryInfo.couponNo" clearable @clear="getCouponList"/>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="手机号" size="small" class="input-with-select" v-model="queryInfo.mobile" clearable @clear="getCouponList"/>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" style="margin-left: 10px;" @click="getCouponList">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="couponList" border stripe>
        <el-table-column label="批次ID" prop="batchId" width="80"></el-table-column>
        <el-table-column label="卡号" prop="couponNo" width="200"></el-table-column>
        <el-table-column label="绑定用户" prop="memberId" width="120"></el-table-column>
        <el-table-column label="绑定手机" prop="mobile" width="130"></el-table-column>
        <el-table-column label="绑定时间" prop="bindTime" width="150"></el-table-column>
        <el-table-column label="有效期">
          <template slot-scope="scope">
            <span v-if="scope.row.startDate!=null">{{scope.row.startDate}} 至 {{scope.row.endDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单id" prop="orderId" width="120"></el-table-column>
        <el-table-column label="状态" prop="statusText" width="100">
          <template slot-scope="scope">
            <span type="primary">{{ scope.row.statusText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.memberId!=null && scope.row.status=='Y'" type="danger" size="mini" @click="lockCoupon(scope.row.id)">冻结</el-button>
            <el-button type="success" v-if="scope.row.memberId!=null && scope.row.status=='L'" size="mini" @click="unLockCoupon(scope.row.id)">解除冻结</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 20]"
                     :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
import Api from "@/api/Api.js";

export default {
    data() {
      return {
        drawer: false,
        dialogVisible: false,
        disabled: false,
        queryInfo: {
          batchId: null,
          couponNo:'',
          couponPass:'',
          mobile:'',
          pageNo: 1,
          pageSize: 20, // 页大小
        },
        editDialogVisible: false,
        editForm: {
          id: ''
        },
        couponBatchList: [],
        couponList: [],
        total: 0
      };
    },
    watch:{
    },
    created() {
      this.getCouponBatchList();
      if(this.$route.query.batchId){
        this.queryInfo.batchId = parseInt(this.$route.query.batchId);
      }
      this.getCouponBatchList();
      this.getCouponList();
    },
    methods: {
      getCouponList() {
        Api.getCouponList(this.queryInfo).then((res) => {
          if (res.success) {
            this.couponList = res.data.records;
            this.total = res.data.total;
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      getCouponBatchList() {
        Api.getCouponBatchList({'pageSize':100}).then((res) => {
          if (res.success) {
            this.couponBatchList = res.data.records;
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      lockCoupon(id) {
        this.$confirm('确定要冻结卡券吗?', '提示', {
          confirmButtonText: '冻结',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          Api.setCouponLock({'id':id}).then((res) => {
            if (res.success) {
              this.$message.success("冻结成功");
              this.getCouponList();
            } else {
              return this.$message.error("冻结失败：" + res.msg);
            }
          });
        })
      },
      unLockCoupon(id) {
        this.$confirm('确定要解冻卡券吗?', '提示', {
          confirmButtonText: '冻结',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          Api.setCouponUnLock({'id':id}).then((res) => {
            if (res.success) {
              this.$message.success("解冻成功");
              this.getCouponList();
            } else {
              return this.$message.error("解冻失败：" + res.msg);
            }
          });
        })
      },
      editDialogClosed() {

      },
      handleSizeChange(pageSize) {
        this.queryInfo.pageSize = pageSize;
        this.getCouponList();
      },
      handleCurrentChange(pageNo) {
        this.queryInfo.pageNo = pageNo;
        this.getCouponList();
      },
    }
};
</script>

<style lang="less" scoped>
.logo_pic {
  max-width: 100px;
}
.upload_img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 20px;
}
</style>
